<script lang="tsx" setup>
import type { FormInstance, FormRules } from 'element-plus'
import type { ColumnItem } from '@/components/common/ProTable/interface'
import { useGlobalStore } from '@/stores/modules/global'
import { useTabsStore } from '@/stores/modules/tabs'
import { useKeepAliveStore } from '@/stores/modules/keepAlive'
import iconfont from '@/assets/iconfont/iconfont.json'
import type { Menu } from '@/components/layout/SubMenu/interface'

const globalStore = useGlobalStore()
const tabStore = useTabsStore()
const keepAliveStore = useKeepAliveStore()

const columns = reactive<ColumnItem[]>([
  {
    prop: 'title',
    label: '名称'
  },
  {
    prop: 'path',
    label: '编码'
  },
  {
    prop: 'type',
    label: '类型',
    render: (scope) => {
      return scope.row.type === 1 ? '菜单' : '按钮'
    }
  },
  {
    prop: 'sort',
    label: '排序'
  },
  {
    type: 'operation',
    label: '操作',
    align: 'center',
    operation: [
      {
        label: '添加子菜单',
        show: (scope) => {
          return scope.row.type === 1
        },
        click: (scope) => {
          ElMessage.success(`子菜单`)
        }
      },
      {
        label: '编辑',
        click: (scope) => {
          ElMessage.success(`编辑`)
        }
      },
      {
        label: '删除',
        click: (scope) => {
          ElMessage.success(`删除`)
        }
      }
    ]
  }
])
const tableData = ref<Menu.MenuOptions[]>([
  {
    id: 1,
    path: '/',
    icon: 'home',
    title: '首页',
    activeMenu: '',
    isLink: '',
    isHide: false,
    isAffix: true,
    isKeepAlive: true,
    type: 1, //菜单类型 1=菜单 2=按钮
    sort: 10000,
    remark: '',
    parentId: 0 //父菜单ID
  },
  {
    id: 2,
    path: '/demo',
    icon: 'all',
    title: 'DEMO',
    activeMenu: '',
    isLink: '',
    isHide: false,
    isAffix: false,
    isKeepAlive: false,
    type: 1, //菜单类型 1=菜单 2=按钮
    sort: 20000,
    remark: '',
    parentId: 0, //父菜单ID
    redirect: '/demo/themeDemo',
    children: [
      {
        id: 21,
        path: '/demo/themeDemo',
        icon: 'all',
        title: '主题预览',
        activeMenu: '',
        isLink: '',
        isHide: false,
        isAffix: false,
        isKeepAlive: false,
        type: 1, //菜单类型 1=菜单 2=按钮
        sort: 21000,
        remark: '',
        parentId: 2, //父菜单ID
        children: [
          {
            id: 211,
            path: '/demo/themeDemo:add',
            // icon: '',
            title: '新增',
            // activeMenu: '',
            // isLink: '',
            // isHide: false,
            // isAffix: false,
            // isKeepAlive: false,
            type: 2, //菜单类型 1=菜单 2=按钮
            sort: 21100,
            remark: '',
            parentId: 21 //父菜单ID
          },
          {
            id: 212,
            path: '/demo/themeDemo:edit',
            // icon: '',
            title: '修改',
            // activeMenu: '',
            // isLink: '',
            // isHide: false,
            // isAffix: false,
            // isKeepAlive: false,
            type: 2, //菜单类型 1=菜单 2=按钮
            sort: 21200,
            remark: '',
            parentId: 21 //父菜单ID
          },
          {
            id: 213,
            path: '/demo/themeDemo:delete',
            // icon: '',
            title: '删除',
            // activeMenu: '',
            // isLink: '',
            // isHide: false,
            // isAffix: false,
            // isKeepAlive: false,
            type: 2, //菜单类型 1=菜单 2=按钮
            sort: 21300,
            remark: '',
            parentId: 21 //父菜单ID
          }
        ]
      }
    ]
  }
])

const formRef = ref<FormInstance>()
const dialogVisible = ref(false)
const addForm = reactive({
  id: 0,
  path: '/',
  icon: 'home',
  title: '首页',
  activeMenu: '',
  isLink: '',
  isHide: false,
  isAffix: true,
  isKeepAlive: true,
  type: 1, //菜单类型 1=菜单 2=按钮
  sort: 10000,
  remark: '',
  parentId: 0 //父菜单ID
})
const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ]
})

const submitForm = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit!')
      // const { data } = await DemoService.login(abc,123)
    } else {
      console.log('error submit!', fields)
    }
  })
}

const handleTest = () => {
  globalStore.setMenuList(tableData.value)
  tabStore.setTabs([])
  keepAliveStore.setKeepAliveName([])
  window.location.href = '/'
}

const iconDialogVisible = ref(false)
const handleIconSelect = (item: any) => {
  iconDialogVisible.value = false
  ElMessage.success(`图标[${item.font_class}]`)
}
</script>

<template>
  <ProTable ref="tableRef" :data="tableData" :columns="columns" isFull>
    <template #tableHeader="scope">
      <el-button type="primary"><i class="iconfont icon-plus"></i>新增菜单</el-button>
      <el-button @click="handleTest">适用配置</el-button>
      <el-button @click="iconDialogVisible = true">图标弹框</el-button>
    </template>
  </ProTable>

  <!-- <el-dialog
    v-model="dialogVisible"
    title="确认操作"
    width="560px"
    class="c-dialog"
  >
    <el-form ref="formRef" :model="addForm" :rules="rules" label-width="108" class="p-20">
      <el-form-item label="一二三四五六" prop="name">
        <el-input v-model="addForm.name" />
      </el-form-item>
      <el-form-item label="一二三四五六七八九" prop="name2">
        <el-input v-model="form.name2" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </template>
  </el-dialog> -->
  <el-dialog v-model="iconDialogVisible" title="图标选择" width="560px" class="c-dialog">
    <el-scrollbar max-height="50vh">
      <div class="flex flex-wrap items-start px-base">
        <div
          class="grow-0 shrink-0 basis-[25%] text-center cursor-pointer py-base rounded-3 hover:bg-#f7f7f7 group"
          v-for="item in iconfont.glyphs"
          :key="item.icon_id"
          @click="handleIconSelect(item)"
        >
          <i
            class="iconfont text-large color-black-primary group-hover:color-primary"
            :class="'icon-' + item.font_class"
          ></i>
          <p class="text-small m-0 mt-10 color-#999 group-hover:color-primary">{{ item.name }}</p>
        </div>
      </div>
    </el-scrollbar>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
